import React, { Fragment } from 'react'
import { View, StyleSheet, Text, ScrollView, Image } from 'react-native'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import BasePage from 'src/pageP/base/base-page/index'
import CustomButton from 'src/components/button/CustomButton'
import { getIndustryCategory } from 'src/utils/RequestAPI'
import { ShowLoading, DismissLoading } from 'src/utils/ToastUtil'
const workNatureMap = new Map([['全职', 1], ['兼职', 0], ['实习', 2]])
class BaseJobExpected extends BasePage {
  constructor (props) {
    super(props)
    this.state = {
      header: {},
      workCategory: [],
      industryCategory: [],
      industryCategoryLeftIndex: 0
    }
  }

  componentWillMount () {
    this.getIndustryCategoryRequest()
  }

  getIndustryCategoryRequest = () => {
    const { workNature } = this.state
    const workNatureValue = workNature && workNature[0]
    const type = workNatureMap.get(workNatureValue)
    ShowLoading()
    getIndustryCategory({ params: { type } }).then(
      ({ data: industryCategory }) => {
        this.setState({
          industryCategory
        })
      }
    ).finally(() => {
      DismissLoading()
    })
  }

  childRender = () => {
    return (
      <Fragment>
        <View style={[styles.jobNatureView]}>
          <View style={styles.jobNatureTitleView}>
            <Text style={styles.jobNatureTitle}>期望职位</Text>
            {this.renderStepView()}
          </View>
          <Text style={styles.jobNatureTitleStatement}>
            *快来pick你心仪的职位吧，可选3个哦！
          </Text>
          <View style={styles.jobExpectedSelectedView}>
            {this._renderSelectedView()}
          </View>
          <View style={styles.selectContentView}>
            <View style={styles.contentLeft}>
              <ScrollView>{this._renderContentLeft()}</ScrollView>
            </View>
            <View style={styles.contentRight}>
              <ScrollView>{this._renderContentRight()}</ScrollView>
            </View>
          </View>
        </View>
        {this.renderBottomBtn()}
      </Fragment>
    )
  }

  renderStepView () {}

  _renderSelectedView = () => {
    const { workCategory } = this.state
    if (workCategory && workCategory.length > 0) {
      return workCategory.map((item, index) => {
        return (
          <View
            key={index}
            style={[
              styles.selectedItemView,
              index > 0 && {
                marginLeft: ScaleS(28)
              }
            ]}
          >
            <Text style={styles.selectedItemLabel}>{item}</Text>
            <CustomButton
              style={styles.closeBtnView}
              params={item}
              onPress={this._clearSelectItem}
            >
              <Image
                style={styles.closeBtn}
                source={require('@/imgC/userinfo/close-black.png')}
              />
            </CustomButton>
          </View>
        )
      })
    }
    return null
  }

  _clearSelectItem = name => {
    const { workCategory } = this.state
    this.setState({
      workCategory: workCategory.filter(e => e !== name)
    })
  }

  _renderContentLeft = () => {
    const { industryCategory, industryCategoryLeftIndex } = this.state
    return industryCategory.map((item, index) => {
      const isSelected = industryCategoryLeftIndex === index
      return (
        <CustomButton
          key={item.id}
          style={styles.contentLeftItem}
          params={index}
          onPress={this._contentLeftItemClick}
        >
          <Text
            style={[
              styles.contentLeftItemLabel,
              isSelected && {
                color: '#FFC200'
              }
            ]}
          >
            {item.name}
          </Text>
          <View
            style={[
              styles.contentLeftLine,
              isSelected && {
                backgroundColor: isSelected ? '#FFC200' : '#FFFFFF'
              }
            ]}
          />
        </CustomButton>
      )
    })
  }

  _contentLeftItemClick = industryCategoryLeftIndex => {
    this.setState({
      industryCategoryLeftIndex
    })
  }

  _renderContentRight = () => {
    const {
      industryCategory,
      industryCategoryLeftIndex,
      workCategory
    } = this.state
    const jobRight = industryCategory[industryCategoryLeftIndex]
    return (
      jobRight && jobRight.industryCategories &&
      jobRight.industryCategories.map((item, index) => {
        const isSelected = workCategory.some(e => e === item.name)
        return (
          <CustomButton
            key={index}
            style={styles.contentLeftItem}
            params={
              item.name
            }
            onPress={this._contentRightItemClick}
          >
            <View style={styles.contentRightItemView}>
              <Text
                style={[
                  styles.contentLeftItemLabel,
                  isSelected && {
                    color: '#FFC200'
                  }
                ]}
              >
                {item.name}
              </Text>
              <View
                style={[
                  styles.contentLeftLine,
                  isSelected && {
                    backgroundColor: '#FFC200'
                  }
                ]}
              />
              {
                item.hotNumber && <Image
                  style={styles.hotRecommend}
                  source={require('@/imgC/userinfo/hot-recommend.png')}
                />
              }
            </View>
          </CustomButton>
        )
      })
    )
  }

  _contentRightItemClick = item => {
    const { workCategory } = this.state
    if (workCategory.some(e => e === item)) {
      this.setState({
        workCategory: workCategory.filter(e => e !== item)
      })
    } else {
      if (workCategory.length === 3) {
        // todo 提示不能添加
      } else {
        this.setState({
          workCategory: [...workCategory, item]
        })
      }
    }
  }
}

export default BaseJobExpected

const styles = StyleSheet.create({
  jobNatureView: {
    flex: 1,
    backgroundColor: '#ffffff',
    paddingHorizontal: ScaleS(26),
    paddingTop: ScaleS(30),
    paddingBottom: ScaleS(70)
  },
  jobNatureTitleView: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  jobNatureTitle: {
    color: '#444444',
    fontSize: ScaleT(27),
    fontWeight: '500',
    flex: 1
  },
  jobNatureIndexView: {
    flexDirection: 'row',
    alignItems: 'flex-end'
  },
  jobNatureIndex: {
    color: '#999999',
    fontSize: ScaleT(20),
    fontWeight: '500'
  },
  jobNatureTotal: {
    color: '#999999',
    fontSize: ScaleT(16),
    fontWeight: '500'
  },
  jobNatureTitleStatement: {
    color: '#FFC200',
    fontSize: ScaleT(14),
    fontWeight: '400',
    marginTop: ScaleS(18)
  },
  jobExpectedSelectedView: {
    flexDirection: 'row',
    alignItems: 'center',
    height: ScaleS(83)
  },
  selectContentView: {
    maxHeight: ScaleS(325),
    flex: 1,
    flexDirection: 'row',
    width: '100%'
  },
  contentLeft: {
    width: ScaleS(90),
    borderColor: '#E8E8E8',
    borderStyle: 'solid',
    borderWidth: ScaleS(1),
    height: '100%'
  },
  contentLeftItem: {
    // width: '100%',
    alignItems: 'center'
  },
  contentLeftItemLabel: {
    height: ScaleS(45),
    lineHeight: ScaleS(45),
    fontWeight: '400',
    fontSize: ScaleT(14),
    color: '#444444'
  },
  contentLeftLine: {
    height: ScaleS(1),
    width: ScaleS(55),
    backgroundColor: '#FAFAFA'
  },
  contentRightItemView: {
    position: 'relative'
  },
  contentRight: {
    flex: 1,
    height: '100%',
    backgroundColor: '#FAFAFA'
  },
  hotRecommend: {
    position: 'absolute',
    width: ScaleS(23),
    height: ScaleS(11),
    resizeMode: 'contain',
    top: ScaleS(8),
    right: ScaleS(-23)
  },
  jobExpectedCompleteView: {
    width: ScaleS(297),
    height: ScaleS(50),
    backgroundColor: '#000000',
    borderRadius: ScaleS(5),
    marginTop: ScaleS(24),
    marginBottom: ScaleS(26),
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: ScaleS(13)
  },
  jobExpectedComplete: {
    color: '#ffffff',
    fontSize: ScaleT(15),
    fontWeight: '600'
  },
  selectedItemView: {
    width: ScaleS(75),
    height: ScaleS(34),
    borderWidth: ScaleS(1),
    borderStyle: 'solid',
    borderColor: '#FFC200',
    borderRadius: ScaleS(4),
    alignItems: 'center',
    justifyContent: 'center',
    position: 'relative'
  },
  selectedItemLabel: {
    color: '#FFC200',
    fontSize: ScaleT(11),
    fontWeight: '400'
  },
  closeBtnView: {
    width: ScaleS(15),
    height: ScaleS(15),
    position: 'absolute',
    top: ScaleS(-7),
    right: ScaleS(-7)
  },
  closeBtn: {
    width: ScaleS(15),
    height: ScaleS(15)
  }
})
